<template>
  <el-drawer v-model="drawer" :title="dialogTitle" size="90%">
    <div class="content">
      <div class="goodsCard acea-row">
        <div class="conter">
          <div class="cart">
            <div :style="'height:' + 100 + '%'" class="acea-row">
              <div class="acea-row cart-left">
                <div class="left-top">
                  <div class="cart">
                    <div class="title acea-row">
                      <div class="picture">
                        <el-avatar :size="50" :src="userStore.getUser.avatar" />
                      </div>
                      <div class="text">
                        <div class="textCon line1">
                          <div class="text-wrap">
                            <div class="name-wrap">
                              <span class="name">{{userStore.getUser.nickname}}</span>
                            </div>
                          </div>
                          <el-dropdown
                            class="switchs"
                            trigger="click"
                            @command="handleCommand"
                          >
                            <a href="javascript:void(0)" style="display: flex; align-items: center;">
                              {{deskNumber > 0 ? deskNumber+'人' : '选择就餐人数'}}
                              <Icon icon="ep:arrow-down" />
                            </a>
                            <template #dropdown>
                              <el-dropdown-menu >
                                <el-dropdown-item v-for="(item,index) in 8" :command="item" :key="index">{{item}}</el-dropdown-item>
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                        </div>
                        <div  class="user-msg">
                          <span class="balance">所属门店:<span class="num">{{shopName}}</span></span>
                        </div>
                      </div>
                    </div>
                    <div class="count">
                      <div class="cart-sel">
                        已选购<span class="num">{{getCartGoodsNumber}}</span
                        >件
                      </div>
                      <div class="count-r">
                        <span class="clear" @click="delAll">
                          <Icon icon="ep:delete" class="mr-5px" /> 
                          清空</span>
                      </div>
                    </div>
                    <div class="listCon">
                      <div v-if="cartList.length > 0" class="list">
                        <div>
                          <div
                            v-for="(item, indexs) in cartList"
                            :key="indexs"
                            class="item acea-row"
                          >
                            <div class="picture">
                              <img  :src="item.image" />
                            </div>
                            <div  class="text">
                              <div class="name line1">
                                {{ item.storeName }}
                              </div>
                              <div                   
                                class="info"
                              >
                                <div class="sku line1">
                                  {{ item.sku }}
                                </div>
                              </div>
                              <div class="sum_price">¥ {{ item.price }}</div>
                            </div>
                            <div
                              class="del"
                              @click="removeFromCart(item.id)"
                            >
                              删除
                            </div>
                            <div
                              class="cartBnt acea-row row-center-wrapper"
                            >
                              <el-input-number 
                                style="width:120px"
                                v-model="item.cartNum"
                                :min="1"
                                @change="changeBuyNum(item)"
                              />
                            </div>
                          </div>
                        </div>
                      </div> 
                      <div
                        v-if="cartList.length == 0"
                        class="noCart acea-row row-center-wrapper"
                      >
                        <div>
                          <el-empty description="暂无结算商品" :image-size="40" />
                        </div>
                      </div>
                    </div>
                    <div class="footer">
                      <div class="left">
                        <div class="conInfo">
                          <div class="right">
                            <div class="storeBnt-wrap"> 
                            </div>
                            <div class="discount">
                              总件数:{{getCartGoodsNumber}} 
                            </div>
                            <span class="discount">总金额: </span>
                            <span class="rmb">¥</span>
                            <span class="num">{{getCartGoodsPrice}}</span>
                          </div>
                        </div>
                      </div>
                      <div class="footer-bottom">
                        <el-button style="flex:1" size="large" round type="primary" :disabled="cartList.length == 0" @click="doSettlement">去下单</el-button>
                      </div>
                    </div>
                  </div>
                  <div class="btn-group-vertical">
                    <!-- <el-button  round type="danger" @click="hangUp()">挂单</el-button>
                    <el-button  round type="danger" @click="hangOff()">取单</el-button> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="goods">
          <div class="acea-row" style="height: 100%">
            <div class="goodsCon">
              <div class="goods-top">
                <el-input
                  v-model="queryParams2.storeName"
                  :maxlength="20"
                  class="input"
                  style="height:50px"
                  placeholder="输入商品关键字：商品名称"
                  size="large"
                  clearable
                >
                  <template #append>
                    <el-button  @click="doQueryGoods()"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
                  </template>
                </el-input>
                <div ref="listWrap" class="list-wrap" @scroll="pageChange">
                  <el-row v-if="productList.length > 0" :gutter="24" class="list">
                    <el-col v-for="(item, index) in productList" :key="index" :sm="12" :md="12" :lg="8" :xl="8" >
                      <div :class="{ on: item.stock }" class="item" @click="clickGoods(item)">
                        <div :style="{ height: goodsHeight + 'px' }" class="picture">
                          <img :src="item.image"  style="width: 100%;" />
                        </div>
                        <div class="name line1">
                          {{ item.storeName }}
                        </div>
                        <div class="text">
                          <div class="text-left">
                            <div class="money">
                              <span class="rmb">¥</span>{{ item.price }}
                            </div>
                          </div>
                          <div
                            v-if="item.cart_num && cartList.length"
                            class="icon-cart-num"
                          >
                            {{ item.cart_num > 99 ? "99+" : item.cart_num }}
                          </div>
                          <div v-if="!item.stock && !item.cart_num" class="no-stock">
                            <div class="trip">
                              <div>暂无</div>
                              <div>库存</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <div v-else style="background-color:#ffffff;padding:100px 0">
                    <el-empty description="暂无商品" :image-size="80" />
                  </div>
                </div>
              </div>
            </div>
            <div class="goodClass acea-row row-center">
              <div>
                <div
                  :key="index"
                  :class="currentCate == 0 ? 'on' : ''"
                  class="item line1"
                  @click="cateTap(0)"
                >
                全部商品
                </div>
                <div
                  v-for="(item, index) in cateList"
                  :key="index"
                  :class="currentCate == item.id ? 'on' : ''"
                  class="item line1"
                  @click="cateTap(item.id)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-dialog title="选择商品规格"  v-model="dialogVisible" class="common-dialog" append-to-body>
        <div class="goods-info">
          <div class="name">{{productInfo.storeName}}</div>
          <div class="price">￥{{productInfo.price}}</div>
          <div class="num"><el-input-number class="input" v-model="goodsNum" :min="1" :max="1000"/></div>
          <div class="spec-list">
              <div class="spec-item" v-for="(attr,index) in productInfo.productAttr" :key="index">
                  <div class="spec-name">{{attr.attrName}}</div>
                  <div class="values">
                    <span  class="value" :class="{'active': value == newValue[index]}" v-for="(value,key) in attr.attrValueArr" :key="key" @click="changePropertyDefault(index, key,false)">{{value}}</span>
                  </div>
              </div>
          </div>
        </div>
        <template #footer>
          <div  class="dialog-footer">
            <el-button type="primary" class="main-button" @click="addToCart()">加入结算</el-button>
            <el-button @click="closeGoodsDialog()">取 消</el-button>
          </div>
        </template>
      </el-dialog>


    </div>
    <settlement ref="settlementRef" :cart-data="cartList" :shop-id="shopId" @get-cart-list="getCartList" />
    <hangList ref="hangListRef" @get-cart-list="getCartList" />
  </el-drawer>
</template>

<script setup lang="ts" name="Cashier">
import * as ProductCategoryApi from '@/api/mall/product/category'
import * as StoreProductApi from '@/api/mall/product/product'
import * as ShopApi from '@/api/mall/store/shop'
import * as CashierApi from '@/api/mall/cashier'
import type { TabsPaneContext } from 'element-plus'
import { formatPast,formatDate } from '@/utils/formatTime'
import settlement from './settlement.vue'
// import payResult from './payResult.vue'
// import scanPay from './scanPay.vue'
import hangList from './hangList.vue'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const message = useMessage() // 消息弹窗
const shopId = ref(0)
const deskNumber = ref(0)
const shopName = ref('')
const drawer = ref(false)
const dialogTitle = ref('') // 弹窗的标题
const dialogVisible = ref(false)
const loading = ref(true) // 列表的加载中
const total = ref(1) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  name: undefined,
  shopId: undefined
})
const queryParams2 = reactive({
  pageNo: 1,
  pageSize: 28,
  storeName: null,
  cateId: null,
  isShow: 1,
  shopId: undefined,
  shopName: ''
})
const queryFormRef = ref() // 搜索的表单

const activeName = ref(0)
const shopList = ref([])
const cateList = ref([])
const productList = ref([])
const memberInfo = ref({})
const productInfo = ref({})
const goodsNum = ref(1)
const newValue = ref([])
const thisProductSku = ref({})
const cartList =  ref([])
const deskInfo =  ref({})
const orderInfo = ref({})
const goodsHeight = ref(0)
const currentCate = ref(0)
const dialogVisible2 = ref(false)
const formItem = reactive({
  price: 0,
  discountPrice: 0,
})
const discountPrice = ref(0)
const payPrice = ref(0)
const peopleNum = ref([

])

/** 打开弹窗 */
const open = async (desk,order) => {
  drawer.value = true
  dialogTitle.value = "桌台：" + desk.number

  deskInfo.value = desk
  if(order.id){
    orderInfo.value = order
    deskNumber.value = order.deskPeople
  }

  getShopList()

}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗


const getCartGoodsNumber = computed(() => { //计算购物车总数
	return cartList.value.reduce((acc, cur) => acc + cur.cartNum, 0)
})

const getCartGoodsPrice = computed(() =>{ //计算购物车总价
	let price = cartList.value.reduce((acc, cur) => acc + cur.cartNum * cur.price, 0);
	return parseFloat(price).toFixed(2);
})
const listWrap = ref()
watch(productList, async(newValue, oldValue) => {
  await nextTick()
  if(newValue){
    goodsHeight.value = listWrap.value.querySelector('.picture').clientWidth;
  }
  
})



const handleCommand = (command: string | number | object) => {
  console.log('peo:',command)
  deskNumber.value = command
}


const cateTap = (cateId) => {
  currentCate.value = cateId
  if(cateId > 0){
    queryParams2.cateId = cateId
    getProductList()
  }else{
    queryParams2.cateId = null
    getProductList()
  }
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.paneName, event)
}

const getShopList = async () => {
  console.log('userStore:',userStore.getUser)
  try {
    const data = await ShopApi.getShopList()
    shopList.value = data
    if(userStore.getUser.shopId > 0){
      shopId.value = userStore.getUser.shopId
    }else{
      shopId.value = shopList.value[0].id
    }
    if(shopId.value == 0){
      message.error('请添加门店或者选择门店')
      return
    }
    queryParams.shopId = shopId.value 
    queryParams2.shopId = shopId.value 
    let shop = shopList.value.find(item => {return item.id = shopId.value})
    console.log('shop:',shop)
    shopName.value = shop.name
    queryParams2.shopName = shop.name
   

    getCateList()

    getProductList()

    getCartList(shopId.value)

  } finally {
    
  }
}
const getCateList = async () => {
  try {
    const data = await ProductCategoryApi.getCategoryList(queryParams)
    cateList.value = data

  } finally {
    
  }
}
const getProductList = async () => {
  try {
    const data = await StoreProductApi.getStoreProductPage(queryParams2)
    productList.value = data.list
    total.value = data.total

  } finally {
    
  }
}

const switchTab = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.paneName)
  if(tab.paneName > 0){
    queryParams2.cateId = tab.paneName
    getProductList()
  }else{
    queryParams2.cateId = null
    getProductList()
  }
  
}

const doQueryGoods = () => {
  getProductList()
}

const clickGoods = async(item) => {
  if(item.stock <= 0){
    message.error('暂无库存')
    return
  }
  dialogVisible.value = true
  const data = await CashierApi.getProductInfo({id:item.id})
  productInfo.value = data
  newValue.value = []
}


const changePropertyDefault = (index, key, isDefault) => { //改变默认属性值
	let valueStr = ''
	
	if(isDefault){
		newValue.value = []
		for(let i = 0;i < productInfo.value.productAttr.length;i++){
			newValue.value[i] = productInfo.value.productAttr[i].attrValueArr[0]
		}

	}else{
		newValue.value[index] = productInfo.value.productAttr[index].attrValueArr[key]
		//valueStr = newValue.value.join(',')
	}
	valueStr = newValue.value.join(',')
  console.log('newValue:',newValue.value)
	
	let productValue = productInfo.value.productValue[valueStr]
	console.log('productValue:',productValue)
	if(!productValue) {
		let skukey = JSON.parse(JSON.stringify(newValue.value))
		skukey.sort((a, b) => a.localeCompare(b))
		//console.log('skukey:',skukey)
		valueStr = skukey.join(',')
		productValue = productInfo.value.productValue[valueStr]
	}

  console.log('valueStr:',valueStr)
  console.log('productValue:',productValue)
  if(productValue){
    thisProductSku.value = productValue
	  productInfo.value.price = parseFloat(productValue.price).toFixed(2);
  }


}

const closeGoodsDialog = () => {
  dialogVisible.value = false
}

const addToCart = async() => {
    if(Object.keys(thisProductSku.value).length == 0) {
      message.error('请选择规格！')
      return
    }
    console.log('user:',thisProductSku.value)
    //let uid = memberInfo.value.id ? memberInfo.value.id : 0
    if(shopId.value == 0){
      message.error('请选择门店！')
      return
    }
    let data = {uid:0,shopId:shopId.value,productId:thisProductSku.value.productId,
                productAttrUnique:thisProductSku.value.unique,
                cartNum:goodsNum.value}

    const res = await CashierApi.addCart(data)

    getCartList(shopId.value)
    payPrice.value = 0
    discountPrice.value = 0
    thisProductSku.value = {}
    closeGoodsDialog()
    
}

const getCartList = async(id) => {
  const res = await CashierApi.getCarts({shopId:id})
  cartList.value = res
}

const changeBuyNum = async(cart) => {
  if(cart.cartNum < 1){
      message.error('数量不能小于1哦')
      return
  }
  await CashierApi.updateCartNum(cart)
  payPrice.value = 0
  discountPrice.value = 0
}

const removeFromCart = async(id) => {
  await message.delConfirm()
  await CashierApi.delCart({ids:id})
  getCartList(shopId.value)
  payPrice.value = 0
  discountPrice.value = 0
}

const delAll = async() => {
  await message.delConfirm()
  let ids = cartList.value.map(item => item.id);
  if(ids.length == 0){
    message.error('暂无商')
    return
  }
  await CashierApi.delCart({ids:ids.toString()})
  getCartList(shopId.value)
  payPrice.value = 0
  discountPrice.value = 0
}

const hangUp = async() => {
  let ids = cartList.value.map(item => item.id);
  if(ids.length == 0){
    message.error('暂无商品挂单')
    return
  }
  //console.log('ids:',ids.toString())
  await CashierApi.hangUp({ids:ids.toString()})
  getCartList(shopId.value)
}

const hangListRef = ref()
const hangOff = () => {
  hangListRef.value.open(shopId.value)
}

const settlementRef = ref()
// const payResultRef = ref()
// const scanPayRef = ref()
const doSettlement = () => {
  if(cartList.value.length == 0){
      message.error('请先加入商品！')
      return
  }
  if(deskNumber.value == 0){
    message.error('就餐人数必须大于0！')
    return
  }
  submit()
}

const submit = async() => {
  let data = {
    //orderId: deskInfo.value.lastOrderStatus == 1 ? deskInfo.value.lastOrderNo : '',
    uidType: 'admin',
    orderId: orderInfo.value.orderId,
    shopId: shopId.value,
    productId: [],
		spec: [],
		number: [],
    remark: '',
    mobile: '',
    orderType:'desk',
    gettime: 0,
    payType: 'cash',
    deductionPrice:0,
    uid: 0,
    cartIds:[],
    deskId: deskInfo.value.id,
		deskNumber: deskInfo.value.number,
		deskPeople: deskNumber.value,
  }
  cartList.value.forEach((item, index) => {
		data.productId.push(item.productId);
		data.spec.push(item.sku);
		//data.spec.push(item.valueStr);
		data.number.push(item.cartNum);
    data.cartIds.push(item.id);
	})

  const res = await CashierApi.createOrder(data)
  if(res){
    drawer.value = false
     
  }


}



/** 初始化 **/
onMounted(() => {
  getShopList()
})
</script>

<style lang="scss" scoped >

.acea-row {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* 辅助类 */
}

.acea-row.row-center-wrapper {
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

:deep(.el-input-group__append) {
    xborder-color: #409EFF;
    background-color: #409EFF;
    color: #ffffff;
    //padding:10px 15px
}


::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px #ccc;
}

::-webkit-scrollbar {
  width: 2px !important;
  /* 对垂直流动条有效 */
}

.input-number {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 15px 0 0;
  border: 1px solid #DDDDDD;
  border-radius: 4px;


  &.discount {
    flex: none;
    width: 167px;
    margin-left: 12px;
  }
}

.changePrice {
  font-weight: 600;
  font-size: 14px;
  color: #F5222D;

  .price {
    font-size: 17px;
    margin-left: 5px;
  }
}

.noCart {
  height: 100%;
  display: flex;
}

.goodsCard {
  flex: 1;
  max-width: 100%;
  min-width: 1100px;
  height: calc(100vh - 155px);
  display: flex;
  flex-wrap: nowrap;
  //padding: 20px;
  background-color: #F5F5F5;
}

.content {
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}


.goods {
  flex: 1;
  min-width: 0;
  // width: calc(100% - 500px);
  height: 100%;


  .goodsCon {
    flex: 1;
    min-width: 0;
    padding: 0 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    // .el-input-group .el-input {
    //     height: 80px;
    //     text-align: center;
    //     border: 0;
    // }
 

    // .input {
    //   padding: 20px 10px 10px 0;
    // }

    .goods-top {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .page {
      margin-top: 0;
      padding: 10px 16px 10px 0;
    }

    .noGood {
      height: 100%;
      border-radius: 20px;
      background: #FFFFFF;

      .picture {
        width: 180px;
        height: 140px;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .tip {
        margin-top: 30px;
        font-size: 15px;
        text-align: center;
        color: #ccc;
      }
    }

    .list-wrap {
      flex: 1;
      min-height: 0;
      padding-top: 20px;
      overflow-x: hidden;
    }

    .list-wrap::-webkit-scrollbar {
      display: none;
    }


    .list {
      .item {
        position: relative;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 15px;
        background: #FFFFFF;

        &.on:hover {
          background-color: #1890FF;
          color: #fff !important;
          box-shadow: 0px 0px 14px 0px rgba(0, 84, 161, 0.18);

          .name {
            color: #fff !important;
            margin-bottom:10px;
          }

          .stock {
            color: #fff !important;

            span {
              border-color: #fff !important;
            }
          }

          .money {
            color: #fff !important;
          }
        }

        .icon-cart-num {
          position: absolute;
          top: -8px;
          right: 0;
          padding: 5px 7px 3px;
          border-radius: 11px;
          background: #FF7700;
          font-size: 14px;
          line-height: 14px;
          color: #FFFFFF;
        }

        .no-stock {
          top: 0;
          left: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;

          .trip {
            background: #4E4E4E;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            color: #FFFFFF;
            font-size: 14px;
          }
        }

        .picture {
          width: 100%;
          height: 130px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }

        .name {
          font-size: 16px;
          line-height:16px;
          color: rgba(0, 0, 0, 0.85);
          margin-top: 10px;
          margin-bottom:14px;
        }

        .text {
          display: flex;
          justify-content: space-between;
          max-height: 80px;

          .text-left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }

          .iconfont {
            position: absolute;
            color: #1890FF;
            font-size: 20px;
            right: 5px;
            bottom: 5px;
          }

          .stock {
            font-size: 13px;
            color: #606266;
            margin: 2px 0;

            span {
              border-radius: 3px;
              border: 1px solid #606266;
              padding: 3px 6px;
              margin-right: 8px;
              font-size: 12px;
            }
          }

          .money {
            font-weight: 500;
            color: #F5222D;
            font-size: 18px;
            line-height: 18px;
            .rmb{
              font-size: 14px;
            }
          }
        }
      }

      .item-shadow {
        width: 150px;
      }
    }
  }

  .goodClass {
    width: 140px;
    overflow-y: auto;
    border-radius: 20px;
    padding: 20px 15px;
    background-color: #FFFFFF;
    .item {
      cursor: pointer;
      width: 110px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      margin-bottom: 18px;
      font-size: 16px;
      color: rgba(0,0,0,0.85);
      border-radius: 20px;
      transition: all 0.1s;

      &.on {
        background-color: #1890FF;
        color: #fff;
      }
    }

    .item:hover {
      background-color: #1890FF;
      color: #fff;
    }
  }
}

.conter {
  height: 100%;
  width: 595px;


  .cart {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    // max-width: 500px;

    .title {
      padding: 0 18px;
      border: 2px solid #FF7700;
    }

    .left-top {
      width: 100%;
      height: 100%;
      display: flex;
      border-radius: 20px;
      background-color: #FFFFFF;
      overflow: hidden;

      .cart {
        // height: calc(100% - 82px);
        flex: 1;
        min-width: 0;
      }

      .btn-group-vertical {
        display: flex;
        flex-direction: column;
        padding: 27px 18px;
        border-left: 1px solid #EEEEEE;
        overflow-x: hidden;

        .el-button{
          flex-shrink: 0;
          width: 100px;
          height: 40px;
         // border-color: #1890FF;
          border-radius: 20px;
          margin-bottom: 30px;
          font-size: 16px !important;
          //color: #1890FF;
          margin-left: 0px;
        }

      }
    }

    .cart-left {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      .count {
        padding: 0px 24px 20px;
        border-bottom: 1px solid #EEEEEE;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .num {
          color: #FF7700;
          padding: 0 5px;
        }

        .cart-sel {
          font-size: 14px;
        }

        .count-r {
          display: flex;
          align-items: center;

          .coupon {
            border-radius: 4px;
            border: 1px solid #FF7700;
            color: #FF7700;
            padding: 3px 10px;
            cursor: pointer;
            font-size: 14px;
          }

          .clear {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 12px;

            img {
              width: 16px;
              height: 16px;
              margin: 0 6px 0 14px;
            }
          }
        }
      }
    }

   

    .right {
      width: 90px;

      .navTabs {
        position: absolute;
        top: 15px;
        cursor: pointer;

        img {
          display: block;
          width: 40px;
          height: 85px;
        }

        .label01 {
          z-index: 5;
          position: relative;
        }

        .label02 {
          margin-top: -16px;
        }
      }

      .item {
        width: 72px;
        background: #F2F3F5;
        margin: 0 auto 13px auto;
        text-align: center;
        padding: 9px 0;
        cursor: pointer;
        position: relative;

        .iconfont {
          position: absolute;
          font-size: 20px;
          top: -9px;
          right: -7px;
          color: #bbb;
        }

        &:hover {
          background-color: #1890FF;
          color: #fff;
        }

        &.on {
          background-color: #1890FF;
          color: #fff;
        }
      }
    }

    .title {
      flex-shrink: 0;
      height: 90px;
      background: rgba(255, 119, 0, 0.05);
      border-radius: 10px;
      margin: 27px 24px 24px;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      overflow: hidden;

      .picture {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .switchs {
        color: #FF7700;
        cursor: pointer;

        a {
          font-size: 14px;
          line-height: 14px;
          color: #FF7700;
          text-decoration: none;
        }
      }

      .text {
        font-size: 13px;
        font-weight: 400;
        color: rgba(51, 51, 51, 0.85);
        flex: 1;
        min-width: 0;

        .textCon {
          margin-bottom: 6px;
          display: flex;
          align-items: center;

          .name {
            font-size: 18px;
          }
          .phone{
            color: #999;
          }
        }

        .text-wrap {
          flex: 1;
          min-width: 0;
        }

        .name-wrap {
          display: inline-flex;
          align-items: center;
          max-width: 100%;
        }

        .user-msg {
        }

        .balance {
          margin-right: 12px;
          .num {
            font-weight: 600;
            color: #303133;
            //font-size 17px;
            line-height: 17px;
            margin-left: 4px;
          }
        }

        .recharge {
          color: #1890FF;
          padding: 2px 4px;
          cursor: pointer;
          border-radius: 3px;
        }

        .recharge:hover {
          background-color: #1890FF;
          color: #fff;
        }

        .name {
          flex: 1;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          font-weight: 600;
          margin-right: 6px;
        }
      }
    }

    .listCon {
      overflow-x: hidden;
      flex: 1;
    }

    .list::-webkit-scrollbar {
      width: 0 !important;
    }

    .list {
      -ms-overflow-style: none;
    }

    .list {
      overflow: -moz-scrollbars-none;
    }

    .list {
      overflow: hidden;
      overflow-y: scroll;

      .item {
        padding: 20px 25px;
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        height: 100%;
        border-radius: 10px;

        &:hover {
          background: rgba(24, 144, 255, 0.05);
        }

        .picture {
          width: 74px;
          height: 74px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }

        .del {
          position: absolute;
          font-size: 15px;
          color: #1890FF;
          right: 25px;
          top: 20px;
          cursor: pointer;
          padding: 2px 7px;
        }

        .cartBnt {
          position: absolute;
          right: 25px;
          height: 24px;
          bottom: 20px;

          .iconfont {
            width: 24px;
            height: 24px;
            background-color: #F2F3F5;
            text-align: center;
            line-height: 24px;
            color: rgba(0, 0, 0, 0.85);
            border-radius: 50%;
          }

          .iconjia {
            color: #fff;
            background-color: #1890FF;
            font-size: 12px;
          }
        }

        .text {
          flex: 1;
          color: #000;
          font-size: 18px;
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          overflow: hidden;

          .end {
            color: #999;
            font-size: 13px;
          }

          .name {
            font-size: 15px;
            margin-top: 5px;
            width: 82%;
          }

          .info {
            color: #999;
            font-size: 12px;
            cursor: pointer;
            padding: 4px 0 7px 0;
            display:flex;
            align-items:center;
            .iconfont {
              font-size: 12px;
              margin-left: 5px;
            }
            .sku{
              max-width:50%;
            }
          }
          .sum_price{
            font-size:16px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
          }
          &.invalid {
            .info {
              cursor: unset;
              display:flex;
              align-items:center;
            }
            .sku{
              max-width:50%;
            }
            .name {
              color: #999;
            }
          }
        }
      }
    }

    .left {
      //width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 0 30px 0 24px;
    }

    .conInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      color: #000;

      .storeBnt-wrap {
        flex: 1;
      }

      .storeBnt {
        padding: 0 10px;
        height: 40px;
        border-radius: 6px;
        color: #333333;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .text {
          max-width: 100px;
        }
      }

      .right {
        flex: 1;
        display: flex;
        width: max-content;
        align-items: baseline;
        font-size: 14px;
        flex-wrap: nowrap;
        white-space: nowrap;

        div {
          white-space: nowrap;
        }

        .rmb {
          font-weight: 600;
          font-size: 16px;
          color: rgba(245, 34, 45, 1);
        }

        .discount {
          font-size: 14px;
          padding: 0 9px
        }

        .detailed {
          color: #1890FF;
          padding: 0 9px 0 3px;
          cursor: pointer;
        }

        .num {
          color: rgba(245, 34, 45, 1);
          font-size: 24px;
          line-height: 22px;
          font-weight: 600;
          white-space: nowrap;
        }
      }

      .num {
        font-size: 24px;
      }
    }

    .footer {
      box-shadow: 0 -1px 11px 0 rgba(0,0,0,0.06);

      .footer-bottom {
        display: flex;
        align-items: center;
        height: 88px;
        padding: 0 24px;
        border-top: 1px solid #EEEEEE;
        
        .ivu-btn {
          flex: 1;
          height: 50px;
          border-color: #1890FF;
          border-radius: 25px;
          background-color: #1890FF;
          font-weight: 500;
          font-size: 18px !important;
          color: #FFFFFF;
        }
      }
    }
  }

  .title {
    color: rgba(0, 0, 0, 0.85);

    .text {
      font-size: 16px;
      font-weight: 500;
    }

    .picture {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .info {
      font-size: 14px;
      margin-left: 8px;
      cursor: pointer;

      .iconfont {
        font-size: 12px;
        margin-left: 5px;
      }

      &:hover {
        color: #2d8cf0;
      }
    }
  }
}


.goods-info {
  border: solid 1px #ccc;
  padding: 30px;
  border-radius: 5px;
  .name {
    height: 40px;
    font-weight: bold;
    font-size: 20px;
  }
  .price {
    height: 40px;
    color: #ff5b57;
    font-size: 16px;
  }
  .spec-list {
    border: solid 1px #ccc;
    padding: 20px;
    margin-top: 10px;
    border-radius: 6px;
    .spec-item {
        margin-bottom: 20px;
      .spec-name {
          font-weight: bold;
          font-size: 16px;
      }
      .values {
          display: block;
          padding-top: 10px;
          margin-left: 0px;
          padding-left: 0px;
          font-size: 12px;
          .value {
            border: solid 1px #cceeee;
            margin-right: 10px;
            padding: 8px 15px 5px 15px;
            cursor: pointer;
            border-radius: 4px;
            background: rgba(0, 172, 172, 0.1);
            color: #666666;
          }
          .active {
            border: solid 1px #ff5891;
            background: #ff5b57;
            color: #FFFFFF;
          }
      }
    }
  }
}


</style>